{% extends 'base.html' %}


{% load staticfiles %}
{% block link %}
    <link href="{% static 'travellog/css/bootstrap.min.css' %}" rel="stylesheet">
    <style type="text/css">
      .page-header {
       margin-top: 0;
      }

      /* 修改bootstrap一些默认样式 */
      .navbar-nav>li>a {
          color: pink !important;
      }
      .list-group-item {
          border-radius: 0 !important;
          border: None !important;
      }
      .list-group-item.active {
          background-color: #dff0ff !important;
          color: #888 !important;
      }
      .navbar-collapse{height: 100% !important;}
    </style>
{% endblock %}
{% block title %}Manage{% endblock %}


{% block content %}
     <!-- 清除已添加的图片 -->
    <form method="post" action="{% url 'clear_database' %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.path }}">
        <button type="submit" class="btn btn-danger pull-right">
            <span class="glyphicon glyphicon-trash"></span> Clear Database
        </button>
    </form>
    <!-- 但前页标题 -->
    <h1 class="page-header">
        <small>{% block ptitle %}Photos{% endblock %}</small>
    </h1>


    <nav class="navbar navbar-default navbar-fixed-top top-box theme">
        <div class="container mh">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse theme" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right top-nav">
                    <li><a href="" class="list-group-item{% if request.path == '/travel/drag-and-drop-upload/' %} active{% endif %}">
                        首页
                    </a></li>
                    <li><a href="" class="list-group-item{% if request.path == '/travel/basic-upload/' %} active{% endif %}">
                        添加日志
                    </a></li>
                    <li><a href="{% url 'progress_bar_upload' %}" class="list-group-item{% if request.path == '/travel/progress-bar-upload/' %} active{% endif %}">
                        上传图片
                    </a></li>
                    <li><a href="" class="list-group-item{% if request.path == '/travel/drag-and-drop-upload/' %} active{% endif %}">
                        邀请码
                    </a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="row">
        <!-- <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">Examples</h3></div>
                <div class="list-group">
                    <a href="" class="list-group-item{% if request.path == '/travel/basic-upload/' %} active{% endif %}">
                        添加日志
                    </a>
                    <a href="{% url 'progress_bar_upload' %}" class="list-group-item{% if request.path == '/travel/progress-bar-upload/' %} active{% endif %}">
                        上传图片
                    </a>
                    <a href="" class="list-group-item{% if request.path == '/travel/drag-and-drop-upload/' %} active{% endif %}">
                        邀请码
                    </a>
                </div>
            </div>
        </div> -->
        <div class="col-md-2">  </div>
        <div class="col-md-9">
            {% block photos_content %}
            {% endblock %}
        </div>
    </div>

    <script src="{% static 'travellog/js/jquery-1.11.1.min.js' %}"></script>
    <script src="{% static 'travellog/js/bootstrap.min.js' %}"></script>
{% endblock %}

{% block javascript %}{% endblock %}
